<template>
  <div class="table-box">
    <div class="table-top flex-row">
      <div style="display: flex">
        <div
          class="task-type"
          :class="{
            'task-dark': props.mapIndex === 1,
          }"
        >
          <el-select
            :popper-class="props.mapIndex === 1 ? 'task-down-dark' : 'task-down'"
            v-model="flightType"
            placeholder="请选择"
            size="large"
            clearable
            @change="changeFlightType"
          >
            <el-option v-for="item in flightOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </div>
        <div class="top-export flex-row" @click="clickExport('single')">
          <img src="../../../assets/img/home/icon-export.png" alt="" />
          <p>导出</p>
        </div>
        <div class="top-export flex-row" @click="clickExport('all')">
          <img src="../../../assets/img/home/icon-export.png" alt="" />
          <p>全部导出</p>
        </div>
      </div>
      <el-icon
        :class="{
          'icon-dark': props.mapIndex === 1,
        }"
        @click="closeTableRight"
        ><Close
      /></el-icon>
    </div>
    <div
      class="table-con"
      :class="{
        'table-con-dark': props.mapIndex === 1,
      }"
    >
      <div class="table-con-table">
        <ComTable
          :loading="pagination.loading"
          :tableData="pagination.tableData"
          :listCount="pagination.total"
          :pageSize="pagination.pageSize"
          :currentPage="pagination.currentPage"
          :userColumn="tableColumns()"
          :headerStyle="pagination.headerStyle"
          @updatePage="handleCurrentChange"
          @sizePage="handleSizeChange"
          @selectionChange="handleSelectionChange"
        >
          <template #selection>
            <el-table-column minWidth="50" type="selection"> </el-table-column>
          </template>
          <template #range>
            <el-table-column label="显示范围" minWidth="70">
              <template #default="scope">
                <div
                  class="range"
                  :class="{'range-active': missionId === scope.row.mission_id}"
                  @click="displayRange(scope.row)"
                >
                  <p>显示范围</p>
                </div>
              </template>
            </el-table-column>
          </template>
          <template #unit_name>
            <el-table-column label="所属单位" width="160">
              <template #default="scope">
                <div class="unit">
                  <p>{{ scope.row.unit_name }}</p>
                </div>
              </template>
            </el-table-column>
          </template>
          <template #position>
            <el-table-column label="位置" width="120">
              <template #default="scope">
                <div class="unit">
                  <p>{{ scope.row.city }}-{{ scope.row.district }}</p>
                </div>
              </template>
            </el-table-column>
          </template>
        </ComTable>
      </div>
    </div>
    <div class="table-bottom flex-row">
      <div
        v-if="!openFlag"
        class="table-open table-bottom-op"
        :class="{
          'table-open-dark': props.mapIndex === 1,
        }"
        @click="openTbale('展开')"
      >
        展开
      </div>
      <div
        v-else
        class="table-stow table-bottom-op"
        :class="{
          'table-stow-dark': props.mapIndex === 1,
        }"
        @click="openTbale('收起')"
      >
        收起
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {ref, reactive, watch} from 'vue';
import {ElMessage} from 'element-plus';
import ComTable from '@/components/comTable/index.vue';
import censusApi from '@/api/census.ts';

const flightOptions = [
  {
    value: '在线飞行',
    label: '在线飞行',
  },
  {
    value: '历史飞行',
    label: '历史飞行',
  },
];
const flightType = ref(''); // 任务状态
const selectionTableItem = ref([]); // 选中
const openFlag = ref(false);
const missionId = ref('');

const pagination = reactive({
  loading: false,
  tableData: [],
  total: 0,
  pageSize: 15,
  currentPage: 1,
  headerStyle: {
    background: 'rgba(30,96,196,0.8)',
    color: '#fff',
    'text-align': 'center',
    height: '50px',
  },
});

const props = defineProps({
  mapIndex: Number,
  tableParams: Object,
});

const emit = defineEmits(['openTable', 'exportTable', 'changeFlightType', 'displayRange', 'closeTableRight']);

watch(
  () => props.mapIndex,
  (n, o) => {
    if (n === 1) {
      pagination.headerStyle.background = 'rgba(255, 255, 255, 0.25)';
    } else {
      pagination.headerStyle.background = 'rgba(30,96,196,0.8)';
    }
  },
);

/**
 * 选择飞行状态
 */
const changeFlightType = () => {
  emit('changeFlightType', flightType.value);
};

/**
 * 导出/全部导出
 * @param {string} type
 */
const clickExport = (type) => {
  if (type === 'single' && !selectionTableItem.value.length) {
    ElMessage.warning('请选择需要导出的数据');
    return;
  }
  emit('exportTable', type, selectionTableItem.value);
};

/**
 * 显示范围
 * @param {object} row
 */
const displayRange = (row) => {
  missionId.value = row.mission_id;
  emit('displayRange', row);
};

/**
 * 关闭
 */
const closeTableRight = () => {
  flightType.value = '';
  emit('closeTableRight');
};

/**
 * 分页相关
 * @param {any} e
 */
const handleSizeChange = (e) => {
  pagination.pageSize = e.pageSize;
  if (flightType.value === '在线飞行') {
    getTableDataOnline(props.tableParams);
  } else {
    getTableDataOffline(props.tableParams);
  }
};

const handleCurrentChange = (e) => {
  pagination.currentPage = e.currentPage;
  if (flightType.value === '在线飞行') {
    getTableDataOnline(props.tableParams);
  } else {
    getTableDataOffline(props.tableParams);
  }
};

/**
 * 表格选择
 * @param {object} val
 */
const handleSelectionChange = (val) => {
  selectionTableItem.value = [];
  val.forEach((item) => {
    selectionTableItem.value.push(item.mission_id);
  });
};

/**
 * 展开收起表格侧边栏
 * @param {sting} type
 */
const openTbale = (type) => {
  if (type === '展开') {
    openFlag.value = true;
  } else {
    openFlag.value = false;
  }
  emit('openTable', openFlag.value);
};

/**
 * 获取在线表格数据
 *
 */
const getTableDataOnline = async (params) => {
  pagination.loading = true;
  const res = await censusApi.onloneDevice({
    ...params,
  });
  if (res.data.length) {
    pagination.tableData = res.data.map((item) => {
      item.created_at = formatDate(item.created_at);
      item.isOnline = true;
      item.average_ground_resolution = item.average_ground_resolution.toFixed(2);
      return item;
    });
  } else {
    pagination.tableData = [];
  }
  pagination.total = res.data.length;
  pagination.pageSize = 15;
  pagination.currentPage = 1;
  pagination.loading = false;
};

/**
 *  获取历史表格数据
 *  @param {object} params
 */
const getTableDataOffline = async (params) => {
  pagination.loading = true;
  const res = await censusApi.getFlightData({
    ...params,
    per_page: pagination.pageSize,
    page: pagination.currentPage,
  });
  pagination.tableData = res.data.data.map((item) => {
    item.created_at = formatDate(item.created_at);
    item.isOnline = false;
    item.average_ground_resolution = item.average_ground_resolution.toFixed(2);
    return item;
  });
  pagination.total = res.data.total;
  pagination.pageSize = Number(res.data.per_page);
  pagination.currentPage = Number(res.data.page);
  pagination.loading = false;
};

/**
 * 时间转换
 * @param {object} time
 */
const formatDate = (time) => {
  // eslint-disable-next-line no-shadow
  const date = new Date(time);
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const theDay = `${year.toString()}.${month.toString()}.${day.toString()}`;
  return theDay;
};

defineExpose({
  getTableDataOffline,
  getTableDataOnline,
});

// 表头
const tableColumns = () => [
  {
    prop: 'selection',
    slot: 'selection',
  },
  {
    prop: 'contact_mobile',
    label: '账号',
    minWidth: 100,
  },
  {
    prop: 'serial_no',
    label: '设备序列号',
    minWidth: 160,
  },
  {
    prop: 'range',
    label: '显示范围',
    slot: 'range',
  },
  {
    prop: 'brand_name',
    label: '设备品牌',
    minWidth: 80,
  },
  {
    prop: 'model_name',
    label: '设备型号',
    minWidth: 100,
  },
  {
    prop: 'unit_name',
    slot: 'unit_name',
  },
  {
    prop: 'camera_type',
    label: '载荷型号',
    minWidth: 120,
  },
  {
    prop: 'average_ground_resolution',
    label: 'GSD',
  },
  {
    prop: 'position',
    slot: 'position',
  },
  {
    prop: 'created_at',
    label: '飞行时间',
    minWidth: 100,
  },
];
</script>

<style lang="scss" scoped>
.table-box {
  padding: 23px 0 0 40px;
  height: calc(100% - 78px);
}
.flex-row {
  display: flex;
  align-items: center;
}
.table-top {
  height: 32px;
  justify-content: space-between;
}
.el-icon {
  margin-right: 32px;
  font-size: 24px;
  cursor: pointer;
}
.icon-dark {
  color: #fff;
}
.task-type {
  width: 115px;
  border: 1px solid #3276da;
  &:deep(.el-select .el-input__wrapper) {
    background: #e2e6f1;
    border-radius: 0;
  }
  &:deep(.el-select .el-input__inner) {
    height: 28px;
    line-height: 28px;
    border: 0;
    color: #4388e5;
  }
  &:deep(.el-input__wrapper) {
    box-shadow: 0 0 0 0 !important;
  }
  &:deep(.el-input__wrapper:hover) {
    box-shadow: 0 0 0 0 !important;
  }
  &:deep(.el-select .el-input.is-focus .el-input__wrapper) {
    box-shadow: 0 0 0 0 !important;
  }
  &:deep(.el-select .el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 0 !important;
  }
  &:deep(.el-input__inner) {
    &::placeholder {
      color: #4388e5;
    }
  }
}
.task-dark {
  background: rgba(105, 120, 158, 0.3);
  border: 1px solid #69789e;
  &:deep(.el-select .el-input__wrapper) {
    background: rgba(105, 120, 158, 0.3);
    border-color: rgba(20, 65, 166, 0.2) !important;
  }
  &:deep(.el-input__inner) {
    &::placeholder {
      color: #d8d8d8;
    }
  }
  &:deep(.el-select .el-input__inner) {
    color: #d8d8d8;
  }
}
.top-export {
  margin-left: 17px;
  height: 32px;
  padding: 7px 13px;
  color: #fff;
  box-sizing: border-box;
  cursor: pointer;
  background: #1693fd;
  border: 1px solid rgba(0, 0, 0, 0.15);
  > img {
    width: 20px;
    height: 20px;
    margin-right: 5px;
  }
}
.table-con {
  margin-top: 19px;
  overflow-y: auto;
  height: calc(100% - 51px);
  &-table {
    height: 100%;
    .text-down {
      color: #068584;
      margin-right: 18px;
      cursor: pointer;
    }
    &:deep(.el-table) {
      background: transparent;
    }
    &:deep(.el-table tr) {
      background: transparent;
    }
    &:deep(.footer) {
      position: absolute;
      left: 0;
    }
    &:deep(.el-pagination__sizes .el-input__wrapper) {
      background: rgba(226, 230, 241, 0.5);
    }
    &:deep(.el-pagination__jump .el-input__wrapper) {
      background: rgba(226, 230, 241, 0.5);
    }
    &:deep(.el-pagination .btn-prev) {
      display: none;
    }
    &:deep(.el-pagination .btn-next) {
      display: none;
    }
    &:deep(.el-pager li) {
      background: rgba(226, 230, 241, 0.5);
      border-radius: 2px;
      margin-right: 2px;
      border: 1px solid #cccccc;
    }
    &:deep(.el-pager li.is-active) {
      border-radius: 2px;
      background: #1989fa;
      color: #fff;
    }
    .range {
      > p {
        font-weight: 500;
        color: #00a560;
        cursor: pointer;
      }
    }
    .unit {
      > p {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .range-active {
      background: #00a560;
      > p {
        color: #fff;
      }
    }
  }
}
.table-con-dark {
  &:deep(.el-table) {
    background: transparent;
    color: #fff;
  }
  &:deep(.el-table tr:hover) {
    > td {
      background: rgba(81, 107, 174, 0.3);
    }
  }
  &:deep(.el-pagination__sizes .el-input__inner) {
    color: #fff;
  }
  &:deep(.el-pagination__jump .el-input__inner) {
    color: #fff;
  }
  &:deep(.el-pagination__total) {
    color: #fff;
  }
  &:deep(.el-pagination__jump) {
    color: #fff;
  }
  &:deep(.el-pager li) {
    background: rgba(105, 120, 158, 0.3);
    border-radius: 2px;
    margin-right: 2px;
    border: 1px solid #69789e;
    color: #fff;
  }
  &:deep(.el-pagination__sizes .el-input__wrapper) {
    background: rgba(105, 120, 158, 0.3);
  }
  &:deep(.el-pagination__jump .el-input__wrapper) {
    background: rgba(105, 120, 158, 0.3);
  }
  &:deep(.el-checkbox__inner) {
    background: rgba(32, 70, 127, 0.5);
  }
  &:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background: #1890ff;
  }
  &:deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner) {
    background: #1890ff;
  }
  .range {
    > p {
      color: #00ff9c;
    }
  }
  .range-active {
    background: #00ff9c;
    > p {
      color: #fff;
    }
  }
}
.table-bottom {
  justify-content: flex-end;
}
.table-bottom-op {
  width: 135px;
  height: 46px !important;
  line-height: 46px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  box-sizing: border-box;
}
.table-open {
  color: #305858;
  text-align: right;
  padding-right: 26px;
  padding-right: 26px;
  background: url(@/assets/img/home/open-bg.png) no-repeat;
  background-size: 100% 100%;
}
.table-open-dark {
  color: #00ff9c;
  background: url(@/assets/img/home/open-bg-dark.png) no-repeat;
  background-size: 100% 100%;
}
.table-stow {
  color: #305858;
  text-align: left;
  padding-left: 26px;
  padding-left: 26px;
  background: url(@/assets/img/home/stow-bg.png) no-repeat;
  background-size: 100% 100%;
}
.table-stow-dark {
  color: #00ff9c;
  background: url(@/assets/img/home/stow-bg-dark.png) no-repeat;
  background-size: 100% 100%;
}
</style>
<style lang="scss">
.task-down {
  position: absolute;
  width: 115px;
  background: #fff;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08),
    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  border-radius: 0;
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(94, 107, 129, 0.5);
    color: #606266;
  }
  .el-select-dropdown__item.selected {
    color: #000;
  }
  .el-select-dropdown__item {
    width: 100%;
  }
}
.task-down-dark {
  position: absolute;
  width: 116px;
  background: #adb8cc;
  border: 1px solid #69789e;
  border-radius: 0;
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
    background: rgba(94, 107, 129, 0.5);
    color: rgba(0, 0, 0, 0.65);
  }
  .el-select-dropdown__item.selected {
    color: #000;
  }
  .el-select-dropdown__item {
    width: 100%;
  }
}
</style>
